import { component$ } from '@builder.io/qwik';
import Button from '~/components/ui/Button';
import Card, { CardBody, CardTitle } from '~/components/ui/Card';
import Tooltip from '~/components/ui/Tooltip';

export default component$(() => {
  const tip = '沉舟侧畔千帆过，病树前头万木春。今日听君歌一曲，暂凭杯酒长精神。';

  return (
    <Card class="my-4">
      <CardTitle>Tooltip</CardTitle>
      <CardBody>
        <div class="my-4 flex gap-4 justify-center">
          <Tooltip content={tip} position="top">
            <Button sizing='lg'>Top</Button>
          </Tooltip>

          <Tooltip content={tip} position="bottom">
            <Button sizing='lg'>Bottom</Button>
          </Tooltip>

          <Tooltip content={tip} position="left">
            <Button sizing='lg'>Left</Button>
          </Tooltip>

          <Tooltip content={tip} position="right">
            <Button sizing='lg'>Right</Button>
          </Tooltip>
        </div>

        <div class="my-4 flex gap-4 justify-center">
          <Tooltip content={tip} position="top-start">
            <Button sizing='lg'>Top Start</Button>
          </Tooltip>

          <Tooltip content={tip} position="top-end">
            <Button sizing='lg'>Top End</Button>
          </Tooltip>
        </div>

        <div class="my-4 flex gap-4 justify-center">
          <Tooltip content={tip} position="bottom-start">
            <Button sizing='lg'>Bottom Start</Button>
          </Tooltip>

          <Tooltip content={tip} position="bottom-end">
            <Button sizing='lg'>Bottom End</Button>
          </Tooltip>
        </div>

        <div class="my-4 flex gap-4 justify-center">
          <Tooltip content={tip} position="left-start">
            <Button sizing='lg'>Left Start</Button>
          </Tooltip>

          <Tooltip content={tip} position="left-end">
            <Button sizing='lg'>Left End</Button>
          </Tooltip>
        </div>

        <div class="my-4 flex gap-4 justify-center">
          <Tooltip content={tip} position="right-start">
            <Button sizing='lg'>Right Start</Button>
          </Tooltip>

          <Tooltip content={tip} position="right-end">
            <Button sizing='lg'>Right End</Button>
          </Tooltip>
        </div>
      </CardBody>
    </Card>
  );
});
